<template>
  <div>
    <ul>
      <div class="icon">
        <i class="iconfont icon-zuojiantou" @click="funa()"></i
        >&nbsp;&nbsp;&nbsp; &nbsp;
      </div>
      <li
        v-for="(v, i) in arr"
        :key="i"
        @click="fun(i)"
        :class="{ yangshi: a == i }"
      >
        {{ v.vg }}
      </li>
    </ul>
    <div class="kuang">
      <p class="ccc">关注主播暂未开播</p>
      <p>&nbsp;</p>
      <p class="ooo">我的关注<i class="iconfont icon-youjiantou"></i></p>
    </div>
    <div class="flex">
      <div class="img" v-for="(vue, index) in newarr" :key="index">
        <img :src="vue.imgurl" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fun(i) {
      this.a = i;
    },
    funa() {
      this.$router.push("/home");
    },
  },
  data() {
    return {
      a: "0",
      arr: [{ vg: "推荐" }, { vg: "听听" }, { vg: "看看" }, { vg: "派对" }],
      newarr: [
        {
          imgurl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.gmw.cn%2Fimgm%2Fattachement%2Fjpg%2Fsite215%2F20181203%2F7024583689401290599.jpg&refer=http%3A%2F%2Fimgs.gmw.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633918357&t=71e966ef8072d0553ca84d2df0b29e9a",
        },
        {
          imgurl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.gmw.cn%2Fimgm%2Fattachement%2Fjpg%2Fsite215%2F20181203%2F7024583689401290599.jpg&refer=http%3A%2F%2Fimgs.gmw.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633918357&t=71e966ef8072d0553ca84d2df0b29e9a",
        },
        {
          imgurl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.gmw.cn%2Fimgm%2Fattachement%2Fjpg%2Fsite215%2F20181203%2F7024583689401290599.jpg&refer=http%3A%2F%2Fimgs.gmw.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633918357&t=71e966ef8072d0553ca84d2df0b29e9a",
        },
        {
          imgurl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.gmw.cn%2Fimgm%2Fattachement%2Fjpg%2Fsite215%2F20181203%2F7024583689401290599.jpg&refer=http%3A%2F%2Fimgs.gmw.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633918357&t=71e966ef8072d0553ca84d2df0b29e9a",
        },
        {
          imgurl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.gmw.cn%2Fimgm%2Fattachement%2Fjpg%2Fsite215%2F20181203%2F7024583689401290599.jpg&refer=http%3A%2F%2Fimgs.gmw.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633918357&t=71e966ef8072d0553ca84d2df0b29e9a",
        },
        {
          imgurl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.gmw.cn%2Fimgm%2Fattachement%2Fjpg%2Fsite215%2F20181203%2F7024583689401290599.jpg&refer=http%3A%2F%2Fimgs.gmw.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633918357&t=71e966ef8072d0553ca84d2df0b29e9a",
        },
        {
          imgurl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.gmw.cn%2Fimgm%2Fattachement%2Fjpg%2Fsite215%2F20181203%2F7024583689401290599.jpg&refer=http%3A%2F%2Fimgs.gmw.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633918357&t=71e966ef8072d0553ca84d2df0b29e9a",
        },
        {
          imgurl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.gmw.cn%2Fimgm%2Fattachement%2Fjpg%2Fsite215%2F20181203%2F7024583689401290599.jpg&refer=http%3A%2F%2Fimgs.gmw.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633918357&t=71e966ef8072d0553ca84d2df0b29e9a",
        },
        {
          imgurl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.gmw.cn%2Fimgm%2Fattachement%2Fjpg%2Fsite215%2F20181203%2F7024583689401290599.jpg&refer=http%3A%2F%2Fimgs.gmw.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633918357&t=71e966ef8072d0553ca84d2df0b29e9a",
        },
      ],
    };
  },
};
</script>

<style scoped>
.flex {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  /* justify-content: space-evenly; */
}
img {
  height: 3.3rem;
  border-radius: 0.3rem;
  width: 100%;
}
.img {
  width: 3.3rem;
  background-color: brown;
  margin-top: 0.3rem;
  margin-left: 0.3rem;
}
.ccc {
  color: #ccc;
  font-size: 0.25rem;
}
.ooo {
  color: #000;
  font-size: 0.25rem;
  font-weight: 600;
}
.kuang {
  width: 80%;
  height: 1.6rem;
  border: 1px solid #ccc;
  border-radius: 0.3rem;
  margin-left: 10%;
  margin-top: 0.5rem;
  display: flex;
  line-height: 1.6rem;
  justify-content: space-around;
}
.icon-zuojiantou {
  font-size: 0.5rem;
}
.yangshi {
  color: red;
  font-weight: 600;
}
ul {
  display: flex;
  justify-content: space-evenly;
  font-size: 0.3rem;
  width: 90%;
  margin-left: 5%;
  margin-top: 0.3rem;
}
</style>